<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能背景移除工具</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body class="bg-pattern">
    <div class="container">
        <header class="text-center my-5">
            <h1 class="display-4">智能背景移除工具</h1>
            <p class="lead">上传图片，一键移除背景，轻松创建专业效果</p>
            <div class="mt-3">
                <span class="badge bg-primary me-2"><i class="fas fa-bolt"></i> 高效</span>
                <span class="badge bg-success me-2"><i class="fas fa-magic"></i> 智能</span>
                <span class="badge bg-info"><i class="fas fa-image"></i> 高质量</span>
            </div>
        </header>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-cloud-upload-alt me-2"></i> 上传图片</h5>
                    </div>
                    <div class="card-body">
                        <form id="upload-form" enctype="multipart/form-data">
                            <div class="mb-4">
                                <label for="file-input" class="form-label">选择图片</label>
                                <input class="form-control form-control-lg" type="file" id="file-input" accept=".jpg, .jpeg, .png">
                                <div class="form-text text-muted mt-2">
                                    <i class="fas fa-info-circle me-1"></i> 支持 JPG, JPEG 和 PNG 格式的图片文件
                                </div>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg" id="upload-btn">
                                    <i class="fas fa-magic me-2"></i> 上传并处理
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="card mt-4" id="instructions">
                    <div class="card-header">
                        <h5><i class="fas fa-info-circle me-2"></i> 使用说明</h5>
                    </div>
                    <div class="card-body">
                        <ol class="mb-0">
                            <li class="mb-2">选择您想要移除背景的图片</li>
                            <li class="mb-2">点击“上传并处理”按钮</li>
                            <li class="mb-2">等待系统自动处理图片</li>
                            <li>下载处理后的透明背景图片</li>
                        </ol>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 id="result-title"><i class="fas fa-image me-2"></i> 处理结果</h5>
                        <a href="#" class="btn btn-success d-none" id="download-btn">
                            <i class="fas fa-download me-2"></i> 下载图片
                        </a>
                    </div>
                    <div class="card-body">
                        <div id="loading" class="text-center d-none">
                            <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-3 lead">正在处理图片，请稍候...</p>
                            <div class="progress mt-3">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
                            </div>
                        </div>
                        <div id="result-container" class="text-center">
                            <i class="fas fa-arrow-circle-up fa-4x text-muted mb-3"></i>
                            <p class="text-muted">上传图片后将在此显示结果</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-columns me-2"></i> 对比预览</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 text-center">
                                <h6><i class="fas fa-image me-2"></i> 原始图片</h6>
                                <div id="original-preview" class="preview-container">
                                    <p class="text-muted"><i class="fas fa-image fa-3x mb-3 d-block"></i> 暂无图片</p>
                                </div>
                            </div>
                            <div class="col-md-6 text-center">
                                <h6><i class="fas fa-magic me-2"></i> 处理后图片</h6>
                                <div id="result-preview" class="preview-container">
                                    <p class="text-muted"><i class="fas fa-wand-magic-sparkles fa-3x mb-3 d-block"></i> 暂无图片</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="text-center mb-0"><i class="fas fa-star me-2"></i> 为什么选择我们的背景移除工具？</h5>
                    </div>
                    <div class="card-body text-center py-4">
                        <div class="row mt-4">
                            <div class="col-md-4 mb-4">
                                <div class="feature-icon mb-3">
                                    <div class="icon-circle">
                                        <i class="fas fa-bolt fa-2x"></i>
                                    </div>
                                </div>
                                <h5>高效快速</h5>
                                <p class="text-muted">先进的AI技术，快速处理图片，节省您的宝贵时间</p>
                            </div>
                            <div class="col-md-4 mb-4">
                                <div class="feature-icon mb-3">
                                    <div class="icon-circle">
                                        <i class="fas fa-magic fa-2x"></i>
                                    </div>
                                </div>
                                <h5>智能精准</h5>
                                <p class="text-muted">智能识别前景和背景，精准分离复杂边缘</p>
                            </div>
                            <div class="col-md-4 mb-4">
                                <div class="feature-icon mb-3">
                                    <div class="icon-circle">
                                        <i class="fas fa-user-shield fa-2x"></i>
                                    </div>
                                </div>
                                <h5>安全可靠</h5>
                                <p class="text-muted">本地处理，保护您的图片隐私和数据安全</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="text-center mt-5 mb-3">
            <div class="mb-3">
                <a href="#instructions" class="btn btn-sm btn-outline-secondary mx-1" id="help-btn"><i class="fas fa-question-circle"></i> 帮助</a>
                <a href="{{ url_for('contact') }}" class="btn btn-sm btn-outline-secondary mx-1"><i class="fas fa-envelope"></i> 联系我们</a>
                <a href="#" class="btn btn-sm btn-outline-secondary mx-1"><i class="fas fa-star"></i> 评分</a>
            </div>
            <p class="text-muted">© 2025 智能背景移除工具 | 基于 RMBG-1.4 模型</p>
            <p class="small text-muted">使用尖端 AI 技术处理图像，为您提供专业的背景移除服务</p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
